<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form :model="form" ref="form" size="normal">
          <el-form-item style="display:inline-block;margin-right:20px;">
            <el-input class="ipt" v-model="form.title" placeholder="根据用户名搜索"></el-input>
          </el-form-item>
          <el-form-item style="display:inline-block;">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="btn">搜索</el-button>
          </el-form-item>
          <el-button
            size="small "
            type="success"
            class="el-icon-edit btns"
            @click="isDialogVisible=true"
          >&emsp; 新增权限组</el-button>
        </el-form>

        <!-- 消息提示 -->
        <el-alert :title="'数据一共'+counts+'条'" type="info" show-icon style="margin-bottom:20px"></el-alert>
        <el-table :data="permissionsList" style="margin-bottom:20px">
          <el-table-column type="selection" width="400px"></el-table-column>
          <el-table-column align="center" prop="title" width="400px" label="用户名"></el-table-column>
          <el-table-column align="center" label="日期" width="700px" sortable prop="permissionsList">
            <template slot-scope="scope">{{scope.row.create_date | formate('YYYY-MM-DD')}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                circle
                size="small"
                icon="el-icon-edit"
                @click="editRow(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                size="small"
                @click="delRow(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="sizes,prev, pager, next,jumper,->,total"
          :total="counts"
          :page-sizes="[5,10]"
          :page-size="form.pagesize"
          :current-page="form.page"
          @size-change="sizeChange"
          @current-change="pageChange"
        ></el-pagination>
        <!-- 创建权限组弹框  -->
        <el-dialog title="创建权限组" :visible.sync="isDialogVisible" width="50%">
          <permissions-add v-if="isDialogVisible" @close="addClose" />
        </el-dialog>
        <!-- 编辑权限弹框 -->
        <el-dialog title="编辑权限组" :visible.sync="editDialogFormVisible">
          <permissionsapi-add @close="close" :row-id="rowId" v-if="editDialogFormVisible" />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
import { list, remove } from '@/api/base/permissions'
import PermissionsAdd from '../components/permissions-add'
import PermissionsapiAdd from '../components/permissionsApi-add'
let items = {
    title: '',
    page: 1,
    pagesize: 10
}
export default {
    name: 'base-permissions',
    data() {
        return {
            form: { ...items },
            //权限
            permissionsList: [],
            checkAll: false,
            isIndeterminate: true,
            isDialogVisible: false, //添加权限弹框变量
            editDialogFormVisible: false, //编辑权限弹框
            rowId: '', //编辑当前点击的id
            counts: 0
        }
    },
    components: {
        PermissionsAdd,
        PermissionsapiAdd
    },
    created() {
        this.getPermissionsList()
    },
    methods: {
        async getPermissionsList() {
            let { data: res } = await list({
                page: this.form.page,
                pagesize: this.form.pagesize,
                title: this.form.title
            })
            this.permissionsList = res.list
            this.counts = res.counts
        },
        async delRow(row) {
            try {
                await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                let { data: res } = await remove({
                    id: row.id
                })

                this.$message.success('删除成功')
                if (this.form.page !== 1 && this.form.pagesize == 1) {
                    this.form.page--
                }
                this.getPermissionsList()
            } catch (error) {
                this.$message.error('取消删除')
            }
        },
        editRow(id) {
            this.rowId = id
            this.editDialogFormVisible = true
        },
        close() {
            this.editDialogFormVisible = false
        },
        addClose() {
            this.isDialogVisible = false
            this.getPermissionsList()
        },
        btn() {
            this.getPermissionsList()
        },
        clear() {
            this.form = { ...items }
            this.getPermissionsList()
        },
        sizeChange(val) {
            this.form.pagesize = val
            this.getPermissionsList()
        },
        pageChange(val) {
            this.form.page = val
            this.getPermissionsList()
        }
    }
}
</script>
